<template lang="html">
    <div v-loading="loading">
       <div>
         <el-button
           type="success"
           @click="save">保存
         </el-button>
       </div>
        <tableVue :list="list":pagination="true"  :state="true" @changeData="selectionVal" ref='editTable'>
          <slot>
              <el-table-column label="属性值" >
                <template slot-scope="scope">
                  <div>
                    <el-select
                       v-if="scope.row.attrEditType == 2"
                        multiple
                        v-model="scope.row.multiple_select_val"
                        placeholder="多选">
                        <el-option
                          v-for="item in scope.row['attrValList']"
                          :key="item.attrValId"
                          :label="item.attrValName"
                          :value="item.attrValId">
                        </el-option>
                      </el-select>
                  </div>
                    <el-select
                       v-if="scope.row.attrEditType == 1"
                        v-model="scope.row.select_val"
                        placeholder="单选">
                        <el-option
                          v-for="item in scope.row['attrValList']"
                          :key="item.attrValId"
                          :label="item.attrValName"
                          :value="item.attrValId">
                        </el-option>
                      </el-select>
                      <div class="input_box">
                        <el-input
                            v-if="scope.row.attrEditType == 3"
                            v-model="scope.row.input_val"
                            placeholder="请输入内容">
                        </el-input>
                      </div>
                </template>
               </el-table-column>
          </slot>
        </tableVue>
    </div>
</template>

<script>
  import Data from './index.js'
  import tableVue from '@/components/alltable.vue'
  import {
    getattrs,
    addAttribute
  } from "@/api/shoppingCentre/productCentre";
  import {
    goodsBasicDetails
  } from "@/api/shoppingCentre/shoppingCentre";
  export default {
    components : {
      tableVue,
    },
    data () {
      return JSON.parse(JSON.stringify(Data))
    },
    mounted () {
       this.geTattrs()
    },
    methods : {
      getGoodsDetails (id) {
        goodsBasicDetails (id).then(res=>{
          if (res.data.code == 'OK') {
            res.data.data.basicAttrList.map(item=>{
              this.list.tbody.map(t=>{

                if(item.attrNameId == t.attrNameId){
                  this.select_data.push(t);
                  this.$refs.editTable.toggleSelection(t);
                  if (t.attrEditType == 2) {
                    t.multiple_select_val.push(item.attrValId);
                  }
                  if (t.attrEditType == '1') {
                    t['select_val'] = item.attrValId;


                  if (t.attrEditType == 1) {
                    t.select_val = item.attrValId;
                  }
                  if(t.attrEditType == 3){
                    t.input_val = item.attrVal;
                  }
                }
              }
              });
            })
          }
        })
      },
    // },
      selectionVal (data) {
          this.select_data = data;
      },
      geTattrs () {//根据分类最后一个id拉取对应的属性
        if (this.$store.state.category.categoryId == '' && this.$store.state.category.goodsId == '') {
           this.$store.state.category.idx = '2'
           return false
        }
        this.loading = true;
        getattrs(this.$store.state.category.categoryId).then(res=>{
           if (res.data.code == 'OK') {
             if(this.$route.query.id) {
                this.getGoodsDetails(this.$route.query.id)
             }
               this.loading = false;
             if(res.data.data.keyAttrList) {
               this.list.tbody = res.data.data.keyAttrList.map((item,index)=>{
                 if(item.attrNameObj.attrEditType == 1){
                   item.attrNameObj['select_val'] = '';
                 }
                 if(item.attrNameObj.attrEditType == 2){
                   item.attrNameObj['multiple_select_val'] = [];
                 }
                 if(item.attrNameObj.attrEditType == 3){
                   item.attrNameObj['input_val'] = '';
                 }

                 return item.attrNameObj
               });
             }
             if(res.data.data.normalAttrList) {
               let count = this.list.tbody.length;
               this.list.tbody  = this.list.tbody.concat(res.data.data.normalAttrList.map((item,index)=>{
                 if(item.attrNameObj.attrEditType == 1){
                   item.attrNameObj['select_val'] = '';
                 }
                 if(item.attrNameObj.attrEditType == 2){
                   item.attrNameObj['multiple_select_val'] = [];
                 }
                 if(item.attrNameObj.attrEditType == 3){
                   item.attrNameObj['input_val'] = '';
                 }
                 return item.attrNameObj
               }))
             }

           }
        })
      },
      save () {
        if (this.select_data < 1) {
           this.$message.error('请选择添加属性')
           return false;
        }

        var data = {
           goodsId : this.$store.state.category.goodsId,
           basicAttrs : []
        }
        this.select_data.map(item=>{
           var arr = [];
           if (item.select_val) {
             arr.push(item.select_val)
           }
          data.basicAttrs.push({
            attrNameId : item.attrNameId,
            attrValId : item.attrEditType == '2' ? item.multiple_select_val : arr,
            attrVal : item.input_val
          })
        })

        addAttribute(data).then(res=>{
           if (res.data.code =='OK') {
              this.$message.success('保存成功');
              this.$store.state.category.idx = '4'
           } else {
             this.$message.error(res.data.message)
           }
        })

      }
    }
  }

</script>

<style scoped>
.input_box {
  width: 200px;
  display: flex;
  align-items: center;
}
</style>
